// import 语句的路径只支持相对路径
import axios from '../../request/myAxios';
// 这个文件是用来支持让更多机型支持 async await 语法
import regeneratorRuntime from '../../lib/runtime/runtime';

// 分页计算公式：  Math.ceil( 总条数 / 页容量 );
//   45 条数据，页容量是 20   Math.ceil(45/20)   结果为 3 页
Page({
  // 自定义数据 - 请求参数
  params: {
    query: '',
    cid: '',
    pagenum: 1,
    pagesize: 10,
  },
  // 自定义数据2 -  总条数
  totalCount: 0,
  // data 是页面数据
  data: {
    // 默认的 tabs 选中状态
    activeIndex: 0,
    // tabs 的数据
    tabs: [
      {
        id: 1,
        text: '综合'
      },
      {
        id: 2,
        text: '销量'
      },
      {
        id: 3,
        text: '价格'
      }
    ],
    // 商品列表数据
    goodsList: [],
  },
  // 改变索引值的事件处理函数
  changetabsIndex(e) {
    const { index } = e.currentTarget.dataset;
    this.setData({
      activeIndex: index,
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 由于商品列表页可以由两个页面跳转过来，不同页面打开页面参数不一样。
    //   1. 商品分类页，传递的是 cid 参数
    //   2. 商品搜索页，传递的是 query 参数
    //  问题：如果某个参数没有传，会得到 undefined。
    //  解决方案：通过 || 运算符，如果是 undefined 就设置成空字符串
    // 把页面参数修改到自定义数据中
    this.params.cid = options.cid || '';
    this.params.query = options.query || '';
    // 调用获取列表
    this.getGoodsList();
  },
  // 获取商品列表数据的封装
  getGoodsList() {
    // 由于下拉刷新的时候，需要用到这个 await，所以函数内部把这个 Promise 对象返回
    return axios({
      url: '/goods/search',
      // 直接从自定义数据中获取所有请求参数
      data: this.params
    })
      .then(res => {
        // total 是商品总条数，存到自定义数据中，以后用于做分页，数据不需要直接显示到页面中
        this.totalCount = res.total;
        // goods 是商品列表，需要渲染到页面中，所以通过 setData 更新
        this.setData({
          // 注意：goodsList 的数据在分页的时候，其实是数据的连接
          // 把原本 data 的列表数据解构，把返回的数据也结构，最终拼成一个新数组
          // 如果不进行数组连接，旧的数组会被新数组覆盖掉。
          goodsList: [...this.data.goodsList, ...res.goods]
        });
      });
  },

  // 监听用户上拉触底事件
  onReachBottom() {
    // console.log('页面上拉到尽头了，就要加载更多的数据');
    // 例子：23 条数据
    //    1 累加变成 2，再发起请求
    //    2 累加变成 3，再发起请求
    //    3 发现已经没有更多数据了，就提示用户没有数据了。 
    // 如何加载更多的数据？
    //    1. 判断页码和总页数关系，如果还有数据，页面就累加 1，再发请求。
    //    2. 如果没有了，就提示用户
    // 计算总页数的公式：   Math.ceil( 总条数 / 页容量 );
    // 如果总页数 大于 当前页码，说明还有数据，所以页码需要累加，再发起请求。
    if (Math.ceil(this.totalCount / this.params.pagesize) > this.params.pagenum) {
      // 页码参数累加
      this.params.pagenum++;
      // 再发商品列表请求
      this.getGoodsList();
    } else {
      // 小程序的提示框
      wx.showToast({ title: '我也是有底线的', icon: 'none' });
    }
  },
  // 监听用户下拉动作
  async onPullDownRefresh() {
    // 1. 商品列表的数据需要清空
    this.setData({ goodsList: [] });
    // 2. 页码变回初始值 1
    this.params.pagenum = 1;
    // 3. 再发送新的请求 - 异步的 -> 变成同步的
    // async await
    // await 后面应该是一个 Promise 对象
    await this.getGoodsList();
    // 如果停止下拉刷新的代码写到了最后？同步写法就可以，异步写法就不行。
    // 数据请求完成后，停止下拉刷新
    wx.stopPullDownRefresh();
  }
});